<template>
  <div class="dialog readonly">
    <el-dialog
      title="中标单位详情"
      :visible.sync="dialogFormVisible"
      @close="close"
      :destroy-on-close="true"
      width="80%"
    >
      <div class="tab">
        <el-form :model="form" :rules="rules" ref="form1">
          <el-row>
            <el-col :span="24">
              <span class="d-start title">单位信息</span>
            </el-col>
          </el-row>
          <el-row :gutter="10" type="flex" justify="end">
            <el-col :span="16">
              <el-form-item
                prop="zbdw_id"
                label="中标单位名称"
                :label-width="formLabelWidth"
                :rules="[{required:true,message:'该值不能为空', trigger: 'blur'}]"
              >
                <el-select
                  size="medium"
                  v-model="form.zbdw_id"
                  placeholder="请选择"
                  @change="Enter($event)"
                  :disabled="$route.query.is_sealed == 2"
                >
                  <el-option
                    :label="item.dwmc"
                    :value="item.id"
                    v-for="item in EnterpriseList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="d-end">
              <el-button
                size="medium"
                type="success"
                plain
                @click="dialogFormVisible2 = !dialogFormVisible2"
                v-if="$route.query.is_sealed == 1"
              >添加企业信息</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item prop="name" label="成立日期" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.clsj" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="员工人数" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.ygrs" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item prop="name" label="法人姓名" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.frxm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="组织机构代码" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.zzjgdm" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item prop="name" label="总经理" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.zjl" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="联系电话" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.zjldh" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="职称" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.zjlzc" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item prop="name" label="技术负责人" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.jsfzr" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="联系电话" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.jsdh" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="职称" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.jszc" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item prop="name" label="企业资质" :label-width="formLabelWidth">
                <el-input size="medium" v-model="EnterprData.qyzz" type="textarea" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="d-between">
              <span class="d-between title">项目主要人员信息</span>
              <el-button
                size="medium"
                type="success"
                plain
                @click="dialogFormVisible3 = !dialogFormVisible3"
                v-if="$route.query.is_sealed == 1"
              >添加人员信息</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item
                prop="xmjl_id"
                label="项目经理姓名"
                :label-width="formLabelWidth"
                :rules="[{required:true,message:'该值不能为空', trigger: 'blur'}]"
              >
                <el-select
                  size="medium"
                  v-model="form.xmjl_id"
                  placeholder="请选择"
                  @change="xmjlSelect($event)"
                  style="width:100%;"
                  :disabled="$route.query.is_sealed == 2"
                >
                  <el-option :label="item.xm" :value="item.id" v-for="item in syry" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="name" label="联系电话" :label-width="formLabelWidth">
                <el-input size="medium" v-model="xmjl.lxdh" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item prop="name" label="单位任职" :label-width="formLabelWidth">
                <el-input size="medium" v-model="xmjl.dwrz" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="name" label="职称" :label-width="formLabelWidth">
                <el-input size="medium" v-model="xmjl.zc" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col :span="24">
            <span class="d-start title">项目其他人员信息</span>
          </el-col>
        </el-row>
        <el-form :model="formNull" :rules="rules" ref="formNull" v-if="$route.query.is_sealed == 1">
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item prop="id" label="姓名" :label-width="formLabelWidth">
                <el-select
                  size="medium"
                  v-model="formNull.id"
                  placeholder="请选择"
                  @change="formNullp($event)"
                  style="width:100%;"
                >
                  <el-option
                    :label="items.xm"
                    :value="items.id"
                    v-for="(items) in syry"
                    :key="items.id + 'llll'"
                    :disabled="items.id == form.xmjl_id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="name" label="联系电话" :label-width="formLabelWidth">
                <el-input size="medium" v-model="formNull.lxdh" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="3" class="d-end">
              <el-form-item>
                <el-button size="medium" icon="el-icon-plus" type="success" @click="addOther()"></el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item prop="name" label="单位任职" :label-width="formLabelWidth">
                <el-input size="medium" v-model="formNull.dwrz" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="name" label="职称" :label-width="formLabelWidth">
                <el-input size="medium" v-model="formNull.zc" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-form>
        <el-form
          :model="item"
          v-for="(item,index) in formOtherPerson"
          :key="index"
          style="margin:10px 0;"
        >
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item prop="name" label="姓名" :label-width="formLabelWidth">
                <el-select
                  size="medium"
                  v-model="item.id"
                  placeholder="请选择"
                  disabled
                  style="width:100%;"
                >
                  <el-option
                    :label="items.xm"
                    :value="items.id"
                    v-for="items in ptcy"
                    :key="items.id + '^-^'"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="name" label="联系电话" :label-width="formLabelWidth">
                <el-input size="medium" v-model="item.lxdh" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="3" class="d-end">
              <el-form-item>
                <el-button
                  size="medium"
                  icon="el-icon-minus"
                  type="success"
                  @click="del(index)"
                  v-if="$route.query.is_sealed == 1"
                ></el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item prop="name" label="单位任职" :label-width="formLabelWidth">
                <el-input size="medium" v-model="item.dwrz" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="name" label="职称" :label-width="formLabelWidth">
                <el-input size="medium" v-model="item.zc" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible=false">取 消</el-button>
        <el-button
          size="medium"
          type="primary"
          @click="save"
          v-if="$route.query.is_sealed == 1"
          :loading="loading"
        >保 存</el-button>
      </div>
    </el-dialog>
    <Prise :dialogFormVisible1="dialogFormVisible2" @close="close1" :item="{}" :lookOrEdit="1" />
    <persion
      :dialogFormVisible1="dialogFormVisible3"
      @close="close2"
      :item="{}"
      :resdata="{enterprise:EnterpriseList}"
      :lookOrEdit="1"
      :enterprise="form.zbdw_id"
    />
  </div>
</template>

<script>
import Prise from "@/views/Basicinfor/EnterpriseLibrary/newProject";
import persion from "@/views/Basicinfor/EnterprisePersonnelBase/newProject";
export default {
  components: { Prise, persion },
  props: ["dialogFormVisible1", "inner", "Xscode", "item"],
  data() {
    return {
      form: {},
      formOtherPerson: [],
      formNull: {},
      rules: {
        bdmc: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        zb_bh: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        zb_nrfl: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        id: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        dwrz: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        lxdh: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        zc: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        zbdw_id: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        xmjl_id: [{ required: true, message: "该值不能为空", trigger: "blur" }]
      },
      formLabelWidth: "140px",
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      resdata: [],
      EnterprData: {},
      EnterpriseList: [],
      xmjl: {},
      ptcy: [],
      syry: [], //可选择人员
      saveHide: false,
      loading: false
    };
  },
  methods: {
    close() {
      this.$refs.form1.resetFields();
      this.$emit("close", this.saveHide);
    },
    close1() {
      this.dialogFormVisible2 = false;
      this.getEnt();
    },
    close2() {
      this.dialogFormVisible3 = false;
      this.getEnt();
    },
    addOther() {
      this.$refs.formNull.validate(valid => {
        if (valid) {
          this.formOtherPerson.push(this.formNull);
          this.syry = [...this.ptcy];
          // if (this.xmjl.id) {
          //   this.syry = this.syry.filter(v => {
          //     return v.id != this.xmjl.id ? this.xmjl.id : "";
          //   });
          // }
          // console.log(this.xmjl)
          this.formOtherPerson.forEach(vv => {
            this.syry.forEach((v, index) => {
              if (vv.id == v.id) {
                this.syry.splice(index, 1);
              }
            });
          });
          this.formNull = {};
        } else {
          return false;
        }
      });
    },
    del(index) {
      this.formOtherPerson.splice(index, 1);
      this.syry = [...this.ptcy];
      // if (this.xmjl.id) {
      //   this.syry = this.syry.filter(v => {
      //     return v.id != this.xmjl.id ? this.xmjl.id : "";
      //   });
      // }

      this.formOtherPerson.forEach(vv => {
        this.syry.forEach((v, index) => {
          if (vv.id == v.id) {
            this.syry.splice(index, 1);
          }
        });
      });
    },
    formNullp(item) {
      this.EnterprData.users.forEach(v => {
        if (v.id == item) {
          this.formNull.lxdh = v.lxdh;
          this.formNull.dwrz = v.dwrz;
          this.formNull.lxdh = v.lxdh;
          if (v.unitinfo) {
            this.formNull.zc = JSON.parse(v.unitinfo)
              .map(v => {
                return v.zc;
              })
              .join(",");
          }
        }
      });
    },
    xmjlSelect(item) {
      this.$refs.form1.clearValidate("xmjl_id");

      this.EnterprData.users.forEach(v => {
        if (v.id == item) {
          this.xmjl = v;
          if (v.unitinfo) {
            this.xmjl.zc = JSON.parse(v.unitinfo)
              .map(v => {
                return v.zc;
              })
              .join(",");
          }
          this.formNull = {};
        }
      });
      this.syry = [...this.ptcy];
      // if (this.xmjl.id) {
      //   this.syry = this.syry.filter(v => {
      //     return v.id != this.xmjl.id ? this.xmjl.id : "";
      //   });
      // }
      // JSON.parse(this.xmjl.unitinfo)
      this.formOtherPerson.forEach(vv => {
        this.syry.forEach((v, index) => {
          if (vv.id == v.id) {
            this.syry.splice(index, 1);
          }
        });
      });

      // this.syry = [...this.ptcy];
    },
    Enter(item) {
      this.$refs.form1.clearValidate("zbdw_id");
      this.EnterpriseList.forEach(v => {
        if (v.id == item) {
          this.EnterprData = { ...v };
          this.ptcy = [...this.EnterprData.users];
          this.form.xmjl_id = null;
          this.xmjl = {};
          this.formNull = {};
          this.formOtherPerson = [];
          this.syry = [...this.ptcy];
        }
      });
    },
    persion(item) {
      this.EnterpriseList.forEach(v => {
        if (v.id == item) {
          this.EnterprData = { ...v };
          this.ptcy = [...this.EnterprData.users];
          this.syry = [...this.ptcy];
        }
      });
    },

    save() {
      this.$refs.form1.validate(valid1 => {
        if (valid1) {
          this.loading = true;
          this.form.xm_id = this.$route.query.xm_id;
          // if(this.formNull)

          let formOtherPerson = [...this.formOtherPerson];
          if (this.formNull.id) {
            formOtherPerson.push(this.formNull);
          }
          this.form.qtry_ids = formOtherPerson
            .map(v => {
              return v.id;
            })
            .join(",");
          delete this.form.zbdw_obj;
          delete this.form.xmjl_obj;
          this.$post("/api/QqBdgl/actions", this.form).then(res => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.saveHide = true;
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
            this.loading = false;
          });
        }
      });
    },

    getEnt(a = 1) {
      this.$get("/api/Enterprise/getlist", {}).then(res => {
        if (res.code == 200) {
          this.EnterpriseList = [...res.data];
          this.persion(this.form.zbdw_id);
          if (Object.values(this.form).length > 0) {
            let aa = [];
            if (this.form.qtry_ids) {
              aa = this.form.qtry_ids.split(",");
            }
            if (a == 2) {
              this.formOtherPerson = [];
              aa.forEach(v => {
                this.EnterprData.users.forEach(vv => {
                  if (v == vv.id) this.formOtherPerson.push(vv);
                });
              });
            }
            this.formOtherPerson.forEach(vv => {
              if (vv.unitinfo) {
                vv.zc = JSON.parse(vv.unitinfo)
                  .map(v => {
                    return v.zc;
                  })
                  .join(",");
              }
              this.syry.forEach((v, index) => {
                if (vv.id == v.id) {
                  this.syry.splice(index, 1);
                }
              });
            });
            // if (this.xmjl.id) {
            //   this.syry = this.syry.filter(v => {
            //     return v.id != this.xmjl.id ? this.xmjl.id : "";
            //   });
            // }
            // this.$forceUpdate();
          }
        }
      });
    }
  },
  mounted() {
    this.getEnt(2);
  },
  watch: {
    dialogFormVisible1(news) {
      this.dialogFormVisible = news;
      this.form = {};
      this.form = { ...this.item };
      if (this.form.zbdw_id == 0) {
        this.form.zbdw_id = null;
      }
      if (this.form.xmjl_id == 0) {
        this.form.xmjl_id = null;
      }
      //   console.log(this.form);
      this.formNull = {};
      this.getEnt(2);
      if (Object.values(this.item).length > 0) {
        if (this.item.zbdw_id != 0)
          this.EnterprData = { ...this.item.zbdw_obj };
        if (this.item.xmjl_id != 0) {
          this.xmjl = { ...this.item.xmjl_obj };
          this.xmjl.zc = JSON.parse(this.xmjl.unitinfo)
            .map(v => {
              return v.zc;
            })
            .join(",");
        }
      }
      if (news) {
        this.saveHide = false;
      }
      if (!news) {
        this.form = {};
        this.resdata = [];
        this.EnterprData = {};
        this.EnterpriseList = [];
        this.xmjl = {};
        this.ptcy = [];
        this.syry = []; //可选择人员
      }

      //   this.syry = [...this.ptcy];
      //   this.syry = this.syry.filter(v => {
      //     return v.id != this.xmjl.id ? this.xmjl.id : "";
      //   });

      //   this.formOtherPerson.forEach(vv => {
      //     this.syry.forEach((v, index) => {
      //       if (vv.id == v.id) {
      //         this.syry.splice(index, 1);
      //       }
      //     });
      //   });
    }
  },
  computed: {}
};
</script>

<style scoped lang="less">
.imgUpdata {
  width: 100%;
  height: 62px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  .imgList {
    height: 100%;
    width: calc(100% - 64px);
  }
  .imgBtn {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 100%;
    background: #ccc;
    border: 1px dashed #ccc;
    flex-shrink: 0;
    cursor: pointer;
    &:hover {
      border: 1px dashed blue;
    }
  }
}
.img {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  i {
    img {
      width: 130px;
      height: 95px;
      padding: 5px;
    }
  }
}
.tab {
  width: 100%;
  height: calc(100% - 54px);
}
.title {
  //   width: 120px;
  padding: 10px 12px;
  font: 20px bold;
  color: #226ab6;
}
</style>